<template>
    <div>
        <innerCommon 
            :location="location"
        >
            <template slot="left">
                <span>{{type==0?'修改':'新增'}}</span>
            </template>
            <div slot="right">
                <a-button type='primary' @click="returnBack()">返回</a-button>
            </div>
            <div slot="table">
                <eform
                v-if="fields||type==1"
                :formData="formData"
                class="form"
                ref="form"
                :fields="fields"
                >
                    <div slot="type">
                        <a-select 
                        style="width:100%;margin-right:10px;"  
                        @change="handleChange" 
                        :disabled='type==0'
                        allow-clear 
                        placeholder="请选择资料标题"
                        v-decorator="['title',{rules: [{ required: true, message: '请选择资料标题' }]}]"
                        >
                            <a-select-option :value="item" v-for="(item,index) in trainingList" :key="index">
                                {{item}}
                            </a-select-option>
                        </a-select>
                    </div>
                    <div slot="content">
                        <eQuill
                            @getQuillContent="getQuillContent"
                            v-decorator="['content',{rules: [{ required: true, message: '请输入资料内容' }]}]"
                            :defaultData="defaultData"
                        ></eQuill>
                    </div>
                    <div slot="attachFile">
                        <attachFile
                            v-decorator="['attachFile']"
                            :fileList="fileList"
                            @getFileUrl="getFileUrl"
                        ></attachFile>
                    </div>
                </eform>
                <div class="quillInfoText" v-html="quillInfo"></div>
                <div class="submitBtn">
                    <a-button @click="returnBack()">取消</a-button>
                    <a-button type="primary" @click="save()">保存</a-button>
                </div>
            </div>
        </innerCommon>
    </div>
</template>
<script>
import {saveTrainingApi,getTrainingDetailApi,eidtTrainingApi,getTrainingListApi} from "@/request/api"
import innerCommon from "@/components/common/innerCommon"
import eform from "@/components/common/form"
import eQuill from "@/components/common/eQuill"
import attachFile from "@/components/common/attachFile"
export default {
    name:"trainingAdd",
    components:{innerCommon,eform,eQuill,attachFile},
    created(){
        this.trainingId=this.$route.query.id
        this.type=this.trainingId?0:1
        if(this.type==0){
            this.getToken(getTrainingDetailApi,{'trainingId':this.trainingId},res=>{
                this.defaultData=res.data.content
                this.quillInfo=res.data.content
            })
        }else{
            this.init()
        }
        this.location=[{
            name:"信息发布管理",
            path:''
        },{
            name:"资料中心",
            path:'/training'
        },{
            name:this.type==0?'修改':'新增',
            path:'/trainingAdd'
        }]
        if(this.type==0){
            this.initEdit()
        }
    },
    data(){
        const formData=[
            {
                label:"实训标题",
                scopedSlots: { customRender: 'type'},
                disabled:false
            },{
                label:"实训内容",
                scopedSlots: { customRender: 'content'},
            },{
                label:"附件",
                scopedSlots: { customRender: 'attachFile'},
            }
        ]
        return{
            location:[],
            trainingList:['数控技术实训中心','工业机器人实训中心','智能制造实训中心','智能制造工程实训中心'],
            fields:null,
            formData,
            quillInfo:'',
            trainingId:'',
            defaultData:'',
            type:1,//1是新增 0是修改
            fileList:[]
        }
    },
    methods:{
        init(){
            this.getToken(getTrainingListApi,{page:1,pageSize:10},res=>{
                this.list=res.data.rows
                let arr=[]
                this.trainingList.forEach(item=>{
                    if(this.list.filter(data=>data.title==item).length==0){
                        arr.push(item)
                    }
                })
                this.trainingList=arr
            })
        },
        initEdit(){
            this.getToken(getTrainingDetailApi,{'trainingId':this.trainingId},res=>{
                this.fields=res.data
                this.fileList=res.data.attachFile || []
            })
        },
        getFileUrl(data){
            this.$refs.form.form.setFieldsValue({['attachFile']:data})
        },
        returnBack(){
            this.$confirm({
                title: '确认返回吗?',
                cancelText:"取消",
                okText:'确定',
                onOk:()=>{
                    this.$router.push({path:'/training'})
                },
                onCancel() {
                },
            });
            
        },
        getQuillContent(data){
            this.quillInfo=data
            this.$refs.form.form.setFieldsValue({['content']:data})
        },
        handleChange(){
            
        },
        save(){
            this.$refs.form.form.validateFields().then(res=>{
                let api=''
                let formData={...res,'info':this.getContent()}
                if(this.type==1){
                    api=saveTrainingApi
                }else{
                    api=eidtTrainingApi
                    formData={...formData,'trainingId':this.trainingId}
                }
                this.getToken(api,formData,data=>{
                    this.$message.success(data.message)
                    this.$router.push({path:'/training'})
                })
            })
        },
        getContent(){
            return document.getElementsByClassName('quillInfoText')[0].innerText
        }
    }
}
</script>